import { Cartesian3, SkyBox } from 'cesium';
import { isNil } from 'lodash';
import { useEffect } from 'react';
import { useCesium } from 'resium';
import { useAppSelector } from '../../../../store';
import negativeX from '../../../../assets/skyBox/five/tycho2t3_80_mx.jpg';
import negativeY from '../../../../assets/skyBox/five/tycho2t3_80_my.jpg';
import negativeZ from '../../../../assets/skyBox/five/tycho2t3_80_mz.jpg';
import positiveX from '../../../../assets/skyBox/five/tycho2t3_80_px.jpg';
import positiveY from '../../../../assets/skyBox/five/tycho2t3_80_py.jpg';
import positiveZ from '../../../../assets/skyBox/five/tycho2t3_80_pz.jpg';

export default function Demo() {
    const { viewer } = useCesium();
    const pos = useAppSelector((state) => state.scene.initPosition);

    useEffect(() => {
        if (isNil(viewer)) return;
        viewer.scene.skyBox.show = true;
        viewer.scene.skyBox = new SkyBox({
            sources: {
                positiveX,
                positiveY,
                positiveZ,
                negativeX,
                negativeY,
                negativeZ,
            },
        });

        viewer.camera.setView({
            destination: Cartesian3.fromDegrees(pos.longitude, pos.latitude, 100000000),
        });
    }, [pos, viewer]);
    return null;
}
